<template>
  <div class="goodsInfo">
    <!-- 购物车页面 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner" v-for="(item ,i ) in goods" :key="item.id">
          <!-- 监听change事件  -->
          <mt-switch v-model="$store.getters.getSelected[item.id]" @change="selectChange(item.id,$store.getters.getSelected[item.id])"></mt-switch>
          <!-- 图片地址失效- -->
          <img src="https://avatars0.githubusercontent.com/u/42566669?s=40&v=4" alt>
          <div class="info">
            <h3 class="title">{{ item.title }}</h3>
            <p>
              <span class="price">￥{{ item.sell_price }}</span>
              <shop-car :carCount="obj[item.id]" :id='item.id'></shop-car>
              <a href="#" @click.prevent="deleteGoods(item.id,i)">删除</a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 结算页面-->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <div clas='countPrice'>
            <p>总计价格（不含运费）</p>
            <p>共计<span>{{ $store.getters.getPrice.count }}</span>件&nbsp;&nbsp;应付<span>{{ $store.getters.getPrice.sum }}</span>元</p>
          </div>
          <mt-button type='primary'>立即结算</mt-button>
        </div>
        <P>{{ $store.getters.getSelected }}</P>
        <p></p>
      </div>
    </div>
  </div>
</template>

<script>
// 引入子组件---
import shopCar from "../../compoents/subcompoents/shopCarbox.vue";

// 导入Toast
import { Toast } from "mint-ui";

export default {
  data: function() {
    return {
      goods: [], //拿到的数据存到这里
      obj: this.$store.getters.getGoodsCount //存放着本地存储中id对应着个数的对象。
    };
  },
  created() {
    this.getGoods();
  },
  methods: {
    getGoods() {
      //获取vuex中共享数据---
      // console.log(this.$store.state.car);
      var car = this.$store.state.car;
      // 遍历car获取每个car的数据的id ----
      var idArr = [];
      car.forEach(item => {
        idArr.push(item.id);
      });

      if (idArr.length <= 0) {
        return;
      }
      ids = idArr.join(",");
      // 这个api 需要根据多个id来获取值----
      this.$http.get("api/goods/getshopcarlist/" + ids).then(result => {
        // console.log(result);    。测试专用---
        console.log(result);
        if (result.body.status == 0) {
          this.goods = result.body.message;
        } else {
          Toast("获取数据失败----");
        }
      });
    },
    deleteGoods(id, index) {
      this.goods.splice(index, 1); // 根据索引删除了当前获取的商品---
      // 调用vuex中mutation中的deleteFormCar 方法
      this.$store.commit("deleteFormCar", id);
    },
    selectChange(id, val) {
      // console.log(id,val);
      var info = {
        id,
        selected:val
      };
      // 调用vuex 中的函数方法 并传递参数
      this.$store.commit('selectedChange',info);
    }
  },
  components: {
    shopCar
  }
};
</script>

<style lang="scss" scoped>
.goodsInfo {
  .mui-card-content-inner {
    display: flex;
    align-items: center;
    img {
      display: block;
      width: 60px;
    }
    .info {
      text-align: center;
      .title {
        font-size: 13px;
        color: #222;
        font-weight: 400;
      }
      .price {
        color: red;
        font-size: 12px;
      }
    }
  }
  .mui-card-content-inner{
    display: flex;
    justify-content: space-between;
    align-content: center;
    span{
      color: red;
    }
}
}

</style>
